<!DOCTYPE html>
<title></title>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<div>
  <input type="number" id="test" value="0">
  <input id="another">
</div>
<script>
  // Positive deltaX or deltaY means scroll right or down.
  async function dispatchWheelEvent(element, deltaX, deltaY)
  {
      element_center = elementCenter(element);
      await wheelTick(deltaX, deltaY, element_center);
  }

  promise_test(async t => {
    const input = document.getElementById('test');
    input.focus();

    // Initial value is 0. We'll wheel up by 1
    await dispatchWheelEvent(input, 0, -1);
    assert_equals(input.value, "1", "Wheel up increments value to 1.");

    // We change the selected value in ScrollBegin and the three wheel ticks
    // are treated as a single stream with one ScrollBegin, so we increase or
    // decrease by one value even though there is more than one wheel tick.
    // Wheel up by 3:
    await dispatchWheelEvent(input, 0, -3);
    assert_equals(input.value, "2", "Larger delta still increments by 1.");

    // Wheel down by 1
    await dispatchWheelEvent(input, 0, 1);
    assert_equals(input.value, "1", "Wheel down decrements value by 1.");

    // Wheel down by 3
    await dispatchWheelEvent(input, 0, 3);
    assert_equals(input.value, "0", "Larger delta still decrements by 1.");

    // Disabled input element
    input.disabled = true;
    await dispatchWheelEvent(input, 0, -1);
    assert_equals(input.value, "0", "Disabled element isn't changed.");
    input.removeAttribute('disabled');

    // Read-only input element
    input.readOnly = true;
    await dispatchWheelEvent(input, 0, -1);
    assert_equals(input.value, "0", "Read only element isn't changed.");
    input.readOnly = false;

    // No focus
    document.getElementById('another').focus();
    await dispatchWheelEvent(input, 0, -1);
    assert_equals(input.value, "0", "Unfocused element isn't changed.");
  }, "Wheel operations for <input type='number'>");
</script>
